<!--
 * @Date: 2023-12-26 13:33:19
 * @Author: zhm
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-08 13:38:45
 * @Description: 项目整改录入插槽
-->
<template>
  <rk-container :isFooter="false"
    :isAside="false"
    :isHeader='false'>
    <template #main>
      <rk-center>
        <template #content>
          <el-form ref="formRef"
            class="mrtb-30px"
            label-width="140px"
            :rules="rules"
            :model="defaultFormData"
            style="margin-left: 15px;">
            <el-form-item label="项目名称">
              <el-input style="width: 400px;margin-bottom: 15px;"
                v-model="formData.proName"
                disabled="disabled" />
            </el-form-item>
            <el-form-item label="项目编码">
              <el-input style="width: 400px;margin-bottom: 15px;"
                v-model="formData.proCode"
                disabled="disabled" />
            </el-form-item>
            <el-form-item label="单位">
              <el-input style="width: 400px;margin-bottom: 15px;"
                v-model="formData.agencyName"
                disabled="disabled" />
            </el-form-item>
            <el-form-item label="要求完成整改时间" prop="completeDate">
              <el-date-picker style="width: 400px;margin-bottom: 15px;"
                v-model="defaultFormData.completeDate"
                placeholder="请选择要求完成整改时间"
                clearable
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="date" />
            </el-form-item>
            <el-form-item label="整改内容" prop="proProblem">
              <el-input type="textarea"
                v-model="defaultFormData.proProblem"
                :rows="4"
                style="width: 80%;"
                maxlength="1000"
                minlength="1"
                show-word-limit
                placeholder="请输入整改内容">
              </el-input>
            </el-form-item>
          </el-form>
        </template>
      </rk-center>
    </template>
  </rk-container>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import RkContainer from "@/components/container/src/RkContainer.vue";
import RkCenter from "@/components/container/src/RkCenter.vue";

const formRef = ref(null)

// ----- 路由相关操作
const route = useRoute();
const query = route.query;

const props = defineProps({
  // 业务ID
  busiId: { type: [String], default: '' },
  // 表单数据信息
  formData: { type: Object, default: () => ({}) },
});

const defaultFormData = reactive({
  completeDate: props.formData.completeDate,
  proProblem: props.formData.proProblem,
  processKey: query.processKey
})

// ----- 获取组件数据
/**
 * 获取本次申报数据的方法，暴露给表单调用，固定名称getCompData
 */
const getCompData = function () {
  let params = null;
  if (props.formData.buttonType == 'edit') {
    params = {
      proId: props.formData.proId,
      adCode: props.formData.adCode,
      agCode: props.formData.agCode,
      id: props.formData.id,
      ...defaultFormData
    }
  } else {
    params = {
      proId: props.formData.proId,
      adCode: props.formData.adCode,
      agCode: props.formData.agCode,
      ...defaultFormData
    }
  }
  return {
    pro_zg_form: JSON.parse(JSON.stringify(params)),
  };
};

const rules = reactive({
  completeDate: [
    { required: true, message: '请输入要求完成整改时间', trigger: ['change'] }
  ],
  proProblem: [
    { required: true, message: '请输入整改内容', trigger: ['blur', 'change'] },
    { min: 1, max: 1000, message: '整改内容长度小于1000位', trigger: 'blur' }
  ]
})
// ----- 校验组件数据
/**
 * 暴露给表单调用，固定名称validateData
 */
const validateData = async function () {
  try {
    await formRef.value.validate()
  } catch (e) {
    return { valid: false, message: `请检查项目整改必填项` };
  }
  return {
    valid: true,
    message: '校验通过！',
  };
};

defineExpose({
  validateData,
  getCompData
})

</script>

<style scoped lang="scss">
.mrtb-30px {
	margin-top: 30px;
	margin-bottom: 30px;
}
</style>